<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <div>
      <el-container>
        <el-aside width="50%">
          <video v-if="isVideo(post.postPhoto)" :src="post.postPhoto" controls />
          <img v-else :src="post.postPhoto" alt="主图片">
        </el-aside>
        <el-container>
          <el-header>
            <div>
              <img class="user-icon" :src="post.photo" alt="用户图标">
              <span>{{ post.name }}</span>
              <button v-if="userId===post.userId" class="gz" @click="errorFollow()">关注</button>
              <button v-else-if="post.isFollow" class="qg" @click="followUser(post.userId)">取关</button>
              <button v-else class="gz" @click="followUser(post.userId)">关注</button>
            </div>
          </el-header>
          <el-main style="height: calc(400px); overflow-y: auto;">
            <div>
              <span style="font-weight: bold;">{{ post.postTitle }}</span>
              <el-button size="mini" @click="reportPost(post)">举报</el-button><br>
              <span>{{ post.postContent }}</span><br>
              <div style="display: flex;">
                <div v-for="(label, index) in post.labelList" :key="index" style="margin-right: 10px;">
                  <a href="/#" style="display: inline;" @click="goLabel(label.labelId)"> #{{ label.labelName }} </a>
                </div>
              </div>
              <span class="all-time">发布时间:{{ post.postTime | formatDate }}</span>
            </div>
            <hr>
            <span v-if="commentList.length===0">暂无评论</span>
            <div v-else>
              <div v-for="(comment, index) in commentList" :key="index">
                <div>
                  <img class="user-icons" :src="comment.photo" @click="toHome(comment.userId)" alt="用户图标">
                  <span style="font-weight: bold;">{{ comment.name }}</span>
                </div>
                <div>
                  <span>{{ comment.commentContent }}</span><br>
                  <span class="all-time">{{ comment.commentTime | formatDate }}</span>
                </div>
                <div class="checkbox-wrapper">
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                    class="heart-icon"
                    @click="praiseComment(comment)"
                  >
                    <path
                      d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
                      :fill="comment.isPraise ? 'red' : 'gray'"
                    />
                  </svg>
                  <span class="like-count">{{ comment.commentPraise }}</span>
                  <img
                    src="https://img95.699pic.com/xsj/0z/yi/4r.jpg%21/fh/300"
                    style="width: 24px;height: 24px"
                    @click="checkComment(comment)"
                  >
                </div>
                <div v-for="(comments, i) in comment.commentVoList" :key="i">
                  <div class="son">
                    <img class="user-icons" :src="comments.photo" @click="toHome(comments.userId)" alt="用户图标">
                    <span style="font-weight: bold;">{{ comments.name }}</span>
                  </div>
                  <div class="son">
                    <div>
                      <span>{{ comments.commentContent }}</span><br>
                      <span class="all-time">{{ comment.commentTime | formatDate }}</span>
                    </div>
                    <div class="checkbox-wrapper">
                      <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                        class="heart-icon"
                        @click="praiseComment(comments)"
                      >
                        <path
                          d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
                          :fill="comments.isPraise ? 'red' : 'gray'"
                        />
                      </svg>
                      <span class="like-count">{{ comments.commentPraise }}</span>
                      <img
                        src="https://img95.699pic.com/xsj/0z/yi/4r.jpg%21/fh/300"
                        style="width: 24px;height: 24px"
                        @click="checkComment(comment)"
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-main>
          <el-footer>
            <div v-if="!isComment" class="checkbox-wrapper">
              <input type="text" placeholder="说点什么..." @click="trueIsComment()">
              <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="heart-icon" @click="praisePost(post)">
                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" :fill="post.isPraise ? 'red' : 'gray'" />
              </svg>
              <span class="like-count">{{ post.postPraise }}</span>
              <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="star-icon" @click="collectPost(post)">
                <path d="M12 .587l3.668 7.336 8.332 1.179-6.096 5.836 1.526 8.277L12 18.886l-7.526 3.837 1.526-8.277-6.096-5.836 8.332-1.179L12 .587z" :fill="post.isCollect ? 'gold' : 'gray'" />
              </svg>
              <span class="like-count">{{ post.postCollect }}</span>
              <img src="https://img95.699pic.com/xsj/0z/yi/4r.jpg%21/fh/300" style="width: 24px;height: 24px" @click="trueIsComment()">
            </div>
            <div v-else class="comment-section">
              <scan v-if="commented != null">回复{{ commented.name }}</scan><br>
              <input v-model="commentContent" type="text" class="comment-input">
              <button class="comment-button send-button" @click="addComment(post.postId)">发送</button>
              <button class="comment-button cancel-button" @click="falseIsComment()">取消</button>
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </div>
  </el-dialog>
</template>

<script setup>
import { deleteAction, getAction, postAction } from '@/utils/xhs-ajax'

export default {
  name: 'PostDetails',
  data() {
    return {
      userId: this.$store.getters.userId,
      commentContent: null,
      commented: null,
      isComment: false,
      dialogVisible: false,
      post: [],
      commentList: []
    }
  },
  methods: {
    isVideo(file) {
      if (!file) return false // 确保 file 不为空
      const ext = file.split('.').pop().toLowerCase()
      return ['mp4', 'avi', 'mov'].includes(ext)
    },
    reportPost(item) {
      this.$confirm('是否举报?', '举报', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postAction('/post/reportPost.do?postId=' + item.postId).then(resp => {
          alert('举报成功！')
          this.$emit('commentDetails', this.post)
        }).catch(error => {
          alert('举报失败：' + error.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消举报'
        })
      })
    },
    goLabel(labelId) {
      this.dialogVisible = false
      this.$emit('setLabelId', labelId)
      this.$emit('getPostList')
    },
    praiseComment(comment) {
      const id = comment.commentId
      comment.isPraise = !comment.isPraise
      if (comment.isPraise) {
        comment.commentPraise++
      } else {
        comment.commentPraise--
      }
      postAction('/comment/praiseComment.do', { commentId: id }).then()
    },
    // 选择评论
    checkComment(comment) {
      console.log(this.userId)
      this.commentContent = null
      this.commented = comment
      this.isComment = true
      this.$nextTick(() => {
        this.$el.querySelector('input').focus()
      })
    },
    trueIsComment() {
      this.commentContent = null
      this.commented = null
      this.isComment = true
      this.$nextTick(() => {
        this.$el.querySelector('input').focus()
      })
    },
    falseIsComment() {
      this.commentContent = null
      this.commented = null
      this.isComment = false
    },
    // 发送评论
    addComment(postId) {
      if (this.commentContent === null) {
        this.$message.error('请输入评论！')
      } else if (this.commented === null) {
        postAction('/post/commentPost.do', { postId: postId, commentContent: this.commentContent }).then(resp => {
          this.commentContent = null
          this.commented = null
          this.isComment = false
          this.$emit('commentDetails', this.post)
        })
      } else {
        postAction('/comment/commentComment.do', { postId: postId, pid: this.commented.commentId, commentContent: this.commentContent }).then(resp => {
          this.commentContent = null
          this.$emit('commentDetails', this.post)
        })
      }
    },
    // 点赞帖子
    praisePost(post) {
      const id = post.postId
      post.isPraise = !post.isPraise
      if (post.isPraise) {
        post.postPraise++
      } else {
        post.postPraise--
      }
      postAction('/post/praisePost.do', { postId: id }).then(resp => {
        this.$emit('commentDetails', this.post)
      })
    },
    toHome(userId) { // 跳转到他人主页
      this.$router.push({ name: 'toUserHome', params: { id: userId }})
    },
    // 收藏帖子
    collectPost(post) {
      const id = post.postId
      post.isCollect = !post.isCollect
      if (post.isCollect) {
        post.postCollect++
      } else {
        post.postCollect--
      }
      postAction('/post/collectPost.do', { postId: id }).then(resp => {
        this.$emit('commentDetails', this.post)
      })
    },
    // 关注帖主
    followUser(userId) {
      postAction('/follow/followUser.do', { id: userId }).then(resp => {
        this.post.isFollow = !this.post.isFollow
      })
    },
    errorFollow() {
      this.$message.error('自己不能关注自己！')
    }
  }
}
</script>

<style scoped lang="scss">
/* 整体布局和间距 */
.el-container {
  padding: 20px;
}

.el-aside {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin-right: 20px;
}

.el-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.el-header img {
  border-radius: 50%;
  margin-right: 10px;
}

.el-header span {
  font-size: 18px;
  font-weight: bold;
}

.el-header .qg {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  background-color: #409EFF;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.el-header .gz {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  background-color: #b3450e;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.el-header button:hover {
  background-color: #66b1ff;
}

.el-main {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.all-time {
  color: gray;
  font-size: smaller;
}

/* 评论区域样式 */
.comment-list {
  margin-top: 20px;
}

.comment-item {
  display: flex;
  margin-bottom: 20px;
}

.comment-item .user-icons {
  border-radius: 50%;
  margin-right: 10px;
}

.comment-item .comment-content {
  flex: 1;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.heart-icon {
  margin-right: 10px;
  cursor: pointer;
}

.heart-icon:hover path {
  fill: #ff6347; /* 悬停时变红 */
}

.like-count {
  margin-right: 10px;
}

.son {
  margin-left: 40px; /* 子评论缩进 */
}

/* 其他样式 */
hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 20px 0;
}

a {
  color: #409EFF;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
.el-aside {
  /* 确保 .el-aside 有一个定义好的高度和宽度 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  overflow: hidden; /* 防止图像溢出 */
  border: 1px solid #ccc; /* 可选，为了视觉上的边框 */
}
.el-aside img {
  width: 100%;
  height: auto;
  border-radius: 5%;
}
.el-aside video {
  width: 100%;
  height: auto;
  border-radius: 5%;
}
.user-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.user-icons{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.comment-section {
  margin: 20px;
  font-family: Arial, sans-serif;
}

.comment-input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.comment-button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.send-button {
  background-color: #4CAF50;
  color: white;
}

.cancel-button {
  background-color: #f44336;
  color: white;
  margin-left: 10px;
}
</style>
